<template>
    <el-dialog v-model="drawer" title="售后" width="700px" :append-to-body="true" custom-class="aftersaleDetail" :close-on-click-modal="true" destroy-on-close>
        <el-form :model="formData" ref="formRef" size="small" :inline="false" label-width="100px">
            <el-form-item label="售后类型：" prop="type">
                <el-tag v-for="(item,index) in afterSaleList" :key="index" type="success" v-show="item.value == formData.type" >
                    {{ item.label }}
                </el-tag>
            </el-form-item>
            <el-form-item v-if="formData.type == 1 || formData.type == 3" label="退款金额：" prop="returnAmount">
                <div style="color: red; font-weight: bold;">￥{{ formData.returnAmount }}</div>
            </el-form-item>
            <el-form-item label="客户：" prop="returnUsername">
                <div>{{ formData.returnUsername }}</div>
            </el-form-item>
            <el-form-item label="发起人：" prop="handleMan">
                <div>{{ formData.handleMan }}</div>
            </el-form-item>
            <el-form-item label="执行人：" prop="executor">
                <el-tag class="ml-2" :type="item.deptType == 0?'':'success'" v-for="(item,index) in formData.executor" :key="index">
                    {{ item.deptType == 0?'仓库':'钱'}}-{{ item.name }}
                </el-tag>
            </el-form-item>
            <el-form-item label="原因：" prop="reason">
                <el-input v-model="formData.reason" type="textarea" :rows="3" />
            </el-form-item>
            <el-form-item label="售后明细：" prop="productList">
                <el-table stripe border size="small" :data="formData.productList" :header-cell-style="{ textAlign: 'center' }"
                    :cell-style="{ textAlign: 'center' }" class="product-table">
                    <el-table-column label="产品图" prop="skuImg" width="120px" align="center">
                        <template #default="scope">
                            <img style="width: 30px; height: 30px" :src="scope.row.skuImg" fit="cover">
                        </template>
                    </el-table-column>
                    <el-table-column label="商品名称" prop="name">
                        <template #default="scope">
                            {{ scope.row.spuName }}
                        </template>
                    </el-table-column>
                    <el-table-column label="规格型号" prop="ver">
                        <template #default="scope">
                            {{ scope.row.skuName }}
                        </template>
                    </el-table-column>
                    <!-- <el-table-column label="退款金额" prop="num">
                        <template #default="scope">
                            <div>￥{{ scope.row.skuPrice * scope.row.number }}</div>
                        </template>
                    </el-table-column> -->
                    <el-table-column label="数量" prop="num">
                        <template #default="scope">
                            <div>{{ scope.row.number }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="120">
                        <template v-slot="{ $index }">
                            <el-button text type="danger" @click="delProduct($index)">已到货</el-button>
                            <el-button text type="danger" @click="delProduct($index)">已退款</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form-item>
        </el-form>

        <template #footer>
            <el-row justify="center">
                <el-button size="small" type="primary" @click="submitForm(ruleRefForm)">确定</el-button>
                <el-button size="small" type="default" @click="cancelForm(ruleRefForm)">取消</el-button>
            </el-row>
        </template>
    </el-dialog>
</template>

<script>
import { computed, reactive, ref, toRefs, onMounted, watch, nextTick } from 'vue'
import { Search, Plus, Delete, Finished, Edit, Back } from '@element-plus/icons-vue'

// import api from '/@/api/commonApi'

export default {
    name: 'AfterSaleForm',
    props: {
        dialogDrawer: {
            type: Boolean,
            default: false
        },
        defaultForm: {
            type: Object,
            default() {
                return {}
            }
        },
        // 打开来源：1 -> 售后列表，2 -> 事项
        sourceType: {
            type: Number,
            default: 1
        },
    },
    emits: ['update:dialogDrawer', 'onSubmit'],
    setup(props, context) {
        const ruleRefForm = ref()
        const { dialogDrawer, defaultForm, sourceType } = toRefs(props)
        const drawer = computed({
            get: () => dialogDrawer.value,
            set: val => {
                context.emit('update:dialogDrawer', val)
            }
        })
        const formData = computed({
            get: () => defaultForm.value,
            set: val => {
                context.emit('update:defaultForm', val)
            }
        })
        const state = reactive({
            afterSaleList: [
                { label: '退款', value: 1 },
                { label: '退货', value: 2 },
                { label: '退货退款', value: 3 },
                { label: '重发补发', value: 4 }
            ],
        })


        onMounted(() => {

        })
        return {
            ...toRefs(state),
            onMounted,
            drawer,
            formData,
        }
    }
}

</script>

<style>
.ml-2 {
    margin-left: 10px;
}
</style>